<template>
  <div class="layer-container" :class="{ collapsed: isCollapsed }">
    <div class="tree-scroll-container">
      <div class="tree-wrapper">
        <!-- 新增的包装器 -->
        <el-tree
          :data="treeData"
          :props="propsData"
          ref="treeRef"
          node-key="id"
          default-expand-all
          show-checkbox
          @check-change="handleCheckChange"
        >
        </el-tree>
      </div>
    </div>

    <button class="toggle-button" @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? "»" : "«" }}
    </button>
  </div>
  <div>
    <el-button
      @click="zoomIn"
      @mousedown="zoomInMouseDown"
      @mouseup="myMouseUp"
      style="
        position: absolute;
        z-index: 9999;
        left: 330px;
        top: 220px;
        background-color: #1e3f5b;
        color: #fff;
        height: 30px;
        width: 20px;
      "
      >+</el-button
    >
    <el-button
      @click="check3D"
      style="
        position: absolute;
        z-index: 9999;
        left: 318px;
        top: 250px;
        background-color: #1e3f5b;
        color: #fff;
        height: 30px;
        width: 20px;
      "
      >{{ checkLabel }}</el-button
    >
    <el-button
      @click="zoomOut"
      @mousedown="zoomOutMouseDown"
      @mouseup="myMouseUp"
      style="
        position: absolute;
        z-index: 9999;
        left: 318px;
        top: 280px;
        background-color: #1e3f5b;
        color: #fff;
        height: 30px;
        width: 20px;
      "
      >-</el-button
    ><el-button
      @click="zoomToOriginal"
      style="
        position: absolute;
        z-index: 9999;
        left: 318px;
        top: 310px;
        background-color: #1e3f5b;
        color: #fff;
        height: 30px;
        width: 20px;
      "
      >复位</el-button
    >
  </div>
  <div v-if="windData" class="current-data-display">
    <h3>海流信息</h3>
    <p>经度: {{ windData.lon }}° E</p>
    <p>纬度: {{ windData.lat }}° N</p>
    <h4>插值数据</h4>
    <p>流速: {{ windData.interpolated.speed }} m/s</p>
    <p>U 分量: {{ windData.interpolated.u }} m/s</p>
    <p>V 分量: {{ windData.interpolated.v }} m/s</p>
    <h4>原始数据</h4>
    <p>流速: {{ windData.original.speed }} m/s</p>
    <p>U 分量: {{ windData.original.u }} m/s</p>
    <p>V 分量: {{ windData.original.v }} m/s</p>
  </div>
  <div v-if="templatureOrSalt" class="wind-data-display">
    <p>经度: {{ templatureOrSalt.lon }}° E</p>
    <p>纬度: {{ templatureOrSalt.lat }}° N</p>
    <p>{{ layerName }}: {{ templatureOrSalt.value }}{{ dataUnit }}</p>
  </div>
  <Colorbar
    v-show="colorbarShow"
    :min="colorMin"
    :max="colorMax"
    :colors="colors"
    :labelCount="labelCount"
  />
</template>

<script setup>
import { ref, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
import * as Cesium from "cesium";
import eventBus from "@/utils/eventBus";
import { useEddyStore } from "@/stores/eddyStore";
import { useYuecengStore } from "@/stores/yuecengStore";
import { useCurrentStore } from "@/stores/currentStore";
import { useNeiboStore } from "@/stores/neiboStore";
import Colorbar from "./ColorBar.vue"; // 引入 Colorbar 组件
// import windjson from "@/assets/V_20241227.json";
import eddiesData from "@/assets/20220101eddies.json";
import neibodata from "@/assets/neibooutput.json";
import yuecengData from "@/assets/yueceng.json";
// import saltData from "@/assets/outputSalt20250220.json";
// import fengmianData from "@/assets/outputfengmian.json";
// import temperatureData from "@/assets/outputTemperature20250210.json";
// import fengmianTemplature from "@/assets/daily_LoG_day1.json";
// import tidalData from "@/assets/tidal_data.json";
// import fengmianData from "@/assets/front_data_processed.json";
import sampleStationsData from "@/assets/chaozhan.json";
import sla from "@/assets/20220101sla.json";
import { useFengmianStore } from "@/stores/fengmianStore";
import { useData2DStore } from "@/stores/data2DStore";
import { useStationsStore } from "@/stores/stationsStore";
const stationsStore = useStationsStore();
import {
  getChaoData,
  getNeiBoData,
  getXuanWoData,
  getXuanWoSLAData,
  getYueCengData,
  getFengMianData,
  getFengmianLunKuoData,
  getYanDuData,
  getYanDuHighData,
  getWenDuData,
  getWenDuHighData,
  getHaiLiuData,
} from "@/api";
// import { useFengmianStore } from "@/stores/fengmian";
const data2DStore = useData2DStore();
const fengmianStore = useFengmianStore();
const currentStore = useCurrentStore();
const yuecengStore = useYuecengStore();
const eddyStore = useEddyStore();
const neiboStore = useNeiboStore();
const viewerHandle = ref({});
const currentLayer = ref({});
const colorbarShow = ref(false);
let checkLabel = ref("2D");
const isPressing = ref(false);
let interval = null;
const windData = ref(null); // 存储海流信息
const templatureOrSalt = ref(null);
const layerName = ref("");
const dataUnit = ref("");
const colorMax = ref(1.23);
const colorMin = ref(0);
const labelCount = ref(10);
const colors = ref([
  "#d61600",
  "#ce2d02",
  "#c64404",
  "#be5b06",
  "#b67208",
  "#ae890a",
  "#a6a00c",
  "#9eb70e",
  "#96ce10",
  "#8ee80e",
]);
const props = defineProps({
  viewerHandle: {
    type: Object,
    required: true,
  },
});
const isCollapsed = ref(false);
const propsData = {
  label: "name",
  children: "children",
};
const treeRef = ref(null);
const isInternalCheck = ref(false); // 标记是否是内部切换
// 定义互斥组
const exclusiveGroups = {
  gradientGroup: [9, 13, 15, 19, 20, 21, 22, 23], // 温度、盐度、海流强度、海表面高度、锋面强度
  eddyYuecengGroup: [5, 6], // 中尺度涡、跃层
};
const treeData = ref([
  {
    name: "温度",
    id: 1,
    children: [
      {
        name: "温度图层",
        id: 19,
      },
      {
        name: "温度深度图层",
        id: 20,
      },
    ],
  },
  {
    name: "盐度",
    id: 2,
    children: [
      {
        name: "盐度图层",
        id: 21,
      },
      {
        name: "盐度深度图层",
        id: 22,
      },
    ],
  },
  {
    name: "海流",
    id: 3,
    children: [
      {
        name: "海流强度图层",
        id: 9,
      },
      {
        name: "海流矢量图层",
        id: 10,
      },
    ],
  },
  {
    name: "潮位",
    id: 4,
    children: [
      {
        name: "潮位预报",
        id: 23,
      },
      {
        name: "重要潮站",
        id: 24,
      },
    ],
  },
  {
    name: "中尺度涡",
    id: 5,
    children: [
      {
        name: "气旋涡",
        id: 11,
        type: "cold",
      },
      {
        name: "反气旋涡",
        id: 12,
        type: "warm",
      },
      {
        name: "海表面高度",
        id: 13,
      },
    ],
  },
  {
    name: "跃层",
    id: 6,
    children: [
      {
        name: "Argo浮标",
        id: 17,
      },
      {
        name: "潜标",
        id: 18,
      },
    ],
  },
  {
    name: "锋面",
    id: 7,
    children: [
      {
        name: "锋中心线",
        id: 14,
      },
      {
        name: "锋区范围",
        id: 16,
      },
      {
        name: "锋面强度",
        id: 15,
      },
    ],
  },
  {
    name: "内波",
    id: 8,
    children: [
      {
        name: "波峰线",
        id: 25,
      },
      {
        name: "波向",
        id: 26,
      },
    ],
  },
]);

const handleCheckChange = async (data, checked, isInternal = false) => {
  // getCheckedKeys();
  if (isInternal) return;
  if (!checked) {
    eventBus.setCurrentLayer("");
    switch (data.name) {
      case "温度":
      case "盐度":
      case "海流强度图层":
      case "锋面强度":
      case "海表面高度":
      case "潮位预报":
        data2DStore.hide();
        colorbarShow.value = false;
        break;
      case "重要潮站":
        stationsStore.setStationsData(sampleStationsData);
        stationsStore.toggleVisibility(false);
        break;
      case "气旋涡":
        eddyStore.toggleEddyVisibility(false, "cold");
        break;
      case "反气旋涡":
        eddyStore.toggleEddyVisibility(false, "warm");
        break;
      case "Argo浮标":
        yuecengStore.toggleVisibility("fubiao");
        break;
      case "潜标":
        yuecengStore.toggleVisibility("qianbiao");
        break;
      case "海流矢量图层":
        currentStore.toggleCurrentVisibility();
        break;
      case "锋中心线":
        fengmianStore.toggleVisibility("frontSegments");
        break;
      case "锋区范围":
        fengmianStore.toggleVisibility("boundaryPolygons");
        break;
      case "波峰线":
        neiboStore.toggleNeiboVisibility();
        break;
      case "波向":
        neiboStore.toggleArrowsVisibility(false);
        break;
    }
    return;
  }
  isInternalCheck.value = true;
  const exclusiveGroup = getExclusiveGroup(data.id);
  if (exclusiveGroup) {
    const checkedKeys = treeRef.value.getCheckedKeys(false);
    checkedKeys.forEach((key) => {
      if (exclusiveGroup.includes(key) && key !== data.id) {
        treeRef.value.setChecked(key, false, false);
      }
    });
  }
  isInternalCheck.value = false;
  // 加载新图层
  switch (data.name) {
    case "温度图层":
      let temperatureData = await getWenDuData({
        ctime: "2025-03-23",
        high: 1,
      });
      await loadLayerData({
        data: temperatureData[0].high.data,
        header: temperatureData[0].high.header,
        type: "温度",
        dataUnit: "℃",
        colors: [
          "#0D4D4B",
          "#217A7A",
          "#35A69C",
          "#4BC2BF",
          "#64E9EE",
          "#B2D882",
          "#FFCC00",
          "#FFAE00",
          "#FF9900",
          "#FF0000",
        ],
        min: getSlaMinMax(temperatureData[0].high.data).min,
        max: getSlaMinMax(temperatureData[0].high.data).max,
      });
      window.addEventListener("templatureOrSalt", handleTemperatureOrSalt);
      break;
    case "温度深度图层":
      let temperaturehighData = await getWenDuHighData({
        ctime: "2025-03-23",
        high: 1,
      });
      await loadLayerData({
        data: temperaturehighData[0].high.data,
        header: temperaturehighData[0].high.header,
        type: "深度",
        dataUnit: "m",
        colors: [
          "#0D4D4B",
          "#217A7A",
          "#35A69C",
          "#4BC2BF",
          "#64E9EE",
          "#B2D882",
          "#FFCC00",
          "#FFAE00",
          "#FF9900",
          "#FF0000",
        ],
        min: getSlaMinMax(temperaturehighData[0].high.data).min,
        max: getSlaMinMax(temperaturehighData[0].high.data).max,
      });
      window.addEventListener("templatureOrSalt", handleTemperatureOrSalt);
      break;
    case "盐度图层":
      let saltData = await getYanDuData({
        ctime: "2025-03-19",
        high: 1,
      });
      await loadLayerData({
        data: saltData[0].data.data,
        header: saltData[0].data.header,
        type: "盐度",
        colors: ["#0D4D4B", "#35A69C", "#64E9EE", "#FFCC00"],
        min: 30,
        max: getSlaMinMax(saltData[0].data.data).max,
      });
      window.addEventListener("templatureOrSalt", handleTemperatureOrSalt);
      break;
    case "盐度深度图层":
      let salthighData = await getYanDuHighData({
        ctime: "2025-03-19",
        high: 1,
      });
      await loadLayerData({
        data: salthighData[0].high.data,
        header: salthighData[0].high.header,
        type: "深度",
        dataUnit: "m",
        colors: ["#0D4D4B", "#35A69C", "#64E9EE", "#FFCC00"],
        min: getSlaMinMax(salthighData[0].high.data).min,
        max: getSlaMinMax(salthighData[0].high.data).max,
      });
      window.addEventListener("templatureOrSalt", handleTemperatureOrSalt);
      break;
    case "海流强度图层":
      let windjson = await getHaiLiuData({
        ctime: "2025-03-23",
        high: 1,
      });
      let newdata = processCurrentData(windjson.data);
      await loadLayerData({
        data: newdata.data,
        header: newdata.header,
        type: "海流强度",
        dataUnit: "m/s",
        // colors: ["#0D4D4B", "#1F7A72", "#35A69C", "#4DC7C5", "#64E9EE"],
        colors: ["#3498DB", "#5DADE2", "#76D7C4", "#F4D03F", "#F39C12"],
        min: getSlaMinMax(newdata.data).min,
        max: getSlaMinMax(newdata.data).max,
      });
      window.addEventListener("templatureOrSalt", handleTemperatureOrSalt);
      break;
    case "潮位预报":
      const chaodata = await getChaoData({
        ctime: "2025-03-23",
      });
      // console.log("chaodata", chaodata);
      await loadLayerData({
        data: chaodata[0].data.data,
        header: chaodata[0].data.header,
        isGradient: false,
        type: "潮位",
        dataUnit: "m",
        colors: [
          "#0D4D4B",
          "#35A69C",
          "#64E9EE",
          "#B2D882",
          "#FF9900",
          "#FF0000",
        ],
        min: getSlaMinMax(chaodata[0].data.data).min,
        max: getSlaMinMax(chaodata[0].data.data).max,
      });
      window.addEventListener("templatureOrSalt", handleTemperatureOrSalt);
      break;
    case "重要潮站":
      stationsStore.setStationsData(sampleStationsData);
      stationsStore.toggleVisibility(true);
      break;
    case "海表面高度":
      let res = getSlaMinMax(sla.data);
      await loadLayerData({
        data: sla.data,
        header: sla.header,
        type: "海表面高度",
        dataUnit: "m",
        colors: [
          "#0D4D4B", // 深青蓝
          "#35A69C", // 青蓝
          "#64E9EE", // 浅青蓝
          "#FFCC00", // 金黄
          "#FF9900", // 橙色
          "#FF0000", // 红色
        ],
        min: res.min,
        max: res.max,
      });
      window.addEventListener("templatureOrSalt", handleTemperatureOrSalt);
      break;
    case "锋面强度":
      let resfengmianNewData = await getFengMianData({
        ctime: "2024-09-03",
      });
      console.log("resfengmianNewData", resfengmianNewData[0].data);
      let resFengmian = getSlaMinMax(resfengmianNewData[0].data.data);
      // let resFengmian = getSlaMinMax(fengmianTemplature.data);
      await loadLayerData({
        // data: fengmianTemplature.data,
        // header: fengmianTemplature.header,
        data: resfengmianNewData[0].data.data,
        header: resfengmianNewData[0].data.header,
        type: "锋面强度",
        dataUnit: "℃/km",
        colors: [
          "#0D4D4B", // 深青蓝
          "#35A69C", // 青蓝
          "#64E9EE", // 浅青蓝
          "#FFCC00", // 金黄
          "#FF9900", // 橙色
          "#FF0000", // 红色
        ],
        min: resFengmian.min,
        max: resFengmian.max,
      });
      window.addEventListener("templatureOrSalt", handleTemperatureOrSalt);
      break;
    case "中尺度涡":
      eventBus.setCurrentLayer("eddy");
      break;
    case "气旋涡":
      eventBus.setCurrentLayer("eddy");
      let neweddiesDataCold = await getXuanWoData({
        ctime: "2025-03-31",
      });
      // // 只加载冷涡数据，不影响暖涡
      // eddyStore.setEddiesData(neweddiesData[0].data, "cold");
      eddyStore.setEddiesData(neweddiesDataCold[0].data, "cold");
      eddyStore.toggleEddyVisibility(true, "cold");
      break;
    case "反气旋涡":
      let neweddiesDataWram = await getXuanWoData({
        ctime: "2025-03-31",
      });
      eventBus.setCurrentLayer("eddy");
      // 只加载暖涡数据，不影响冷涡
      eddyStore.setEddiesData(neweddiesDataWram[0].data, "warm");
      eddyStore.toggleEddyVisibility(true, "warm");
      break;
    case "Argo浮标":
      eventBus.setCurrentLayer("yueceng");
      // let thisyuecengData = await fetchYueCengData();
      // yuecengStore.setYuecengData(thisyuecengData[0].data);
      yuecengStore.setYuecengData(yuecengData);
      yuecengStore.toggleVisibility("fubiao");
      break;
    case "潜标":
      eventBus.setCurrentLayer("yueceng");
      // let thisyuecengData = await fetchYueCengData();
      // yuecengStore.setYuecengData(thisyuecengData[0].data);
      yuecengStore.setYuecengData(yuecengData);
      yuecengStore.toggleVisibility("qianbiao");
      break;
    case "锋中心线":
      eventBus.setCurrentLayer("fengmian");
      let fengmianzhongxin = await getFengmianLunKuoData({
        ctime: "2024-09-03",
      });
      console.log("fengmianlunkuo", fengmianzhongxin);
      fengmianStore.setFengmianData(fengmianzhongxin[0].data);
      fengmianStore.toggleVisibility("frontSegments");
      // fengmianStore.setFengmianCenterData(fengmianData);
      // fengmianStore.toggleFengmianVisibility(true);
      break;
    case "锋区范围":
      eventBus.setCurrentLayer("fengmian");
      let fengmianlunkuo = await getFengmianLunKuoData({
        ctime: "2024-09-03",
      });
      console.log("fengmianlunkuo", fengmianlunkuo);
      fengmianStore.setFengmianData(fengmianlunkuo[0].data);
      fengmianStore.toggleVisibility("boundaryPolygons");
      break;
    case "波峰线":
      // let neibores = fetchNeiBoData();
      eventBus.setCurrentLayer("neibo");
      neiboStore.setNeiboData(neibodata);
      neiboStore.toggleNeiboVisibility(true);
      break;
    case "波向":
      eventBus.setCurrentLayer("neibo");
      // neiboStore.setNeiboData(neibodata);
      neiboStore.toggleArrowsVisibility(true);
      break;
    case "海流矢量图层":
      // 加载海流矢量图层数据
      let windjsonShiLiang = await getHaiLiuData({
        ctime: "2025-03-23",
        high: 1,
      });
      currentStore.setWindData(windjsonShiLiang.data);
      currentStore.setinterpolatedColors(["#ffffff"]);
      currentStore.toggleCurrentVisibility(true);
      window.addEventListener("wind-data", handleWindData);
      break;
  }
};
const getExclusiveGroup = (id) => {
  for (const [_, ids] of Object.entries(exclusiveGroups)) {
    if (ids.includes(id)) return ids;
  }
  return null;
};
// 安全的图层加载方法
const loadLayerData = async (config) => {
  // 先隐藏当前图层
  if (data2DStore.isVisible) {
    data2DStore.hide();
    await nextTick(); // 确保DOM更新完成
  }

  // 设置新图层数据
  data2DStore.setData(config.data);
  data2DStore.setHeader(config.header);
  data2DStore.setIsGradient = config.isGradient;
  data2DStore.setColors(config.colors);
  data2DStore.minDataValue = config.min;
  data2DStore.maxDataValue = config.max;

  // 更新UI状态
  layerName.value = config.type;
  dataUnit.value = config.dataUnit;
  colorMin.value = config.min;
  colorMax.value = config.max;
  colors.value = config.colors;
  labelCount.value = config.colors.length;
  // 显示新图层
  await data2DStore.show();
  colorbarShow.value = true;
};
watch(
  () => props.viewerHandle,
  (newValue, oldValue) => {
    viewerHandle.value = props.viewerHandle;
  }
);
// 监听单个日期变化
watch(
  () => eventBus.selectedDate,
  (newDate) => {
    console.log("日期变化:", newDate);
  },
  { immediate: true } // 立即执行一次
);
// 定义数据
const isExpanded = ref(true); // 控制层是否展开，默认为true（展开）
onMounted(async () => {
  viewerHandle.value = props.viewerHandle;
  currentLayer.value = props.currentLayer;
  eventBus.$on("time-change", handleTimeChange);
});
onBeforeUnmount(() => {
  eventBus.$off("time-change", handleTimeChange);
});
function getSlaMinMax(slaData) {
  // 过滤掉null和NaN值
  const validNumbers = slaData
    .filter((item) => item !== null) // 先过滤掉null值
    .map(Number) // 将字符串转换为数字
    .filter(Number.isFinite); // 过滤掉NaN以及无穷大的值

  if (validNumbers.length === 0) {
    // 如果没有有效数字，根据业务需求决定返回什么
    return { min: NaN, max: NaN };
  }

  // 计算最小值和最大值
  const min = Math.min(...validNumbers);
  const max = Math.max(...validNumbers);

  return { min, max };
}
function processCurrentData(originalArray) {
  const [uData, vData] = originalArray.filter((item) =>
    [3, 2].includes(item.header.parameterNumber)
  );

  // 1. 计算原始强度
  const rawIntensity = uData.data.map((u, index) => {
    const v = vData.data[index];
    return isNaN(u) || isNaN(v) ? "NaN" : Math.hypot(u, v);
  });

  // 2. 转换0→null
  const processedData = rawIntensity.map((value) =>
    value === 0 ? null : value
  );

  // 3. 计算统计量
  const validData = processedData.filter(
    (v) => typeof v === "number" && v !== null
  );

  return {
    header: uData.header,
    data: processedData,
    max: validData.length ? Math.max(...validData) : null,
    min: validData.length ? Math.min(...validData) : null,
  };
}
// 定义方法
const toggleLayer = () => {
  isExpanded.value = !isExpanded.value;
};
const emit = defineEmits(["toggle-visibility", "toggle-YuecengVisibility"]);
const check3D = () => {
  if (viewerHandle.value.scene.mode == Cesium.SceneMode.SCENE3D) {
    viewerHandle.value.scene.mode = Cesium.SceneMode.SCENE2D;
    checkLabel.value = "3D";
  } else {
    viewerHandle.value.scene.mode = Cesium.SceneMode.SCENE3D;
    checkLabel.value = "2D";
  }
};
// 处理 wind-data 事件
const handleWindData = (event) => {
  windData.value = event.detail;
};
const handleTemperatureOrSalt = (event) => {
  templatureOrSalt.value = event.detail;
};
const zoomIn = () => {
  let position = viewerHandle.value.camera.position;
  let cameraHeight =
    viewerHandle.value.scene.globe.ellipsoid.cartesianToCartographic(
      position
    ).height;
  // 每次缩小 20 倍，参数可改
  let moveRate = cameraHeight / 30.0;
  viewerHandle.value.camera.moveForward(moveRate);
};
const zoomOut = () => {
  // 单击缩小
  let position = viewerHandle.value.camera.position;
  let cameraHeight =
    viewerHandle.value.scene.globe.ellipsoid.cartesianToCartographic(
      position
    ).height;
  // 每次缩小 20 倍，参数可改s
  let moveRate = cameraHeight / 30.0;
  viewerHandle.value.camera.moveBackward(moveRate);
};
function zoomInMouseDown() {
  // 长按放大
  isPressing.value = true;
  if (isPressing.value) {
    interval = setInterval(() => {
      zoomIn();
    }, 30); // 设置间隔时间以控制放大和缩小的速度
  }
}
function zoomOutMouseDown() {
  // 长按缩小
  isPressing.value = true;
  if (isPressing.value) {
    interval = setInterval(() => {
      zoomOut();
    }, 30); // 设置间隔时间以控制放大和缩小的速度
  }
}
function myMouseUp() {
  isPressing.value = false;
  clearInterval(interval);
}
const zoomToOriginal = () => {
  viewerHandle.value.camera.setView({
    destination: {
      x: -3558397.3075464107,
      y: 7300150.323537398,
      z: 2041719.4055434903,
    },
    orientation: {
      heading: 6.27669114823209,
      pitch: -1.248789382616426,
      roll: 6.283120764297309,
    },
  });
};
const handleTimeChange = (timeData) => {
  console.log("时间变化了:", timeData);
  // 在这里处理时间变化逻辑
  // timeData 包含: { timestamp, date, dayIndex, timeIndex }
};
</script>

<style scoped>
/* 主容器样式 - 加宽版 */
.layer-container {
  width: 15%;
  height: 95vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(24, 44, 70, 0.8);
  border-radius: 10px 10px 10px 0;
  display: flex;
  flex-direction: column; /* 改为纵向布局 */
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

.tree-scroll-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  margin-right: 2px;
  /* 移除 justify-content: center 改为默认从顶部开始 */
  display: flex;
  flex-direction: column;
}

/* 新增一个包装器确保内容在容器内垂直居中 */
.tree-wrapper {
  margin: auto 0; /* 自动上下边距实现居中 */
  width: 100%;
}

/* 暗色风格滚动条 */
.tree-scroll-container::-webkit-scrollbar {
  width: 8px;
}
.tree-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(64, 158, 255, 0.6);
  border-radius: 4px;
}
.tree-scroll-container::-webkit-scrollbar-track {
  background-color: rgba(16, 32, 54, 0.4);
  border-radius: 4px;
}

/* 树形控件样式 */
.layer-container .el-tree {
  background-color: transparent;
  color: #fff;
  width: 100%;
}

/* 收缩按钮变窄 */
.toggle-button {
  width: 12px;
  padding: 15px 0;
  position: absolute;
  right: -12px; /* 默认位置在容器右侧外部 */
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 1000;
}

/* 解决点击白屏问题 */
.layer-container >>> .el-tree-node:focus > .el-tree-node__content,
.layer-container >>> .el-tree-node__content:focus {
  background-color: transparent !important;
}

/* 仅根节点文字放大 */
.layer-container
  >>> .el-tree-node.is-root
  > .el-tree-node__content
  .el-tree-node__label {
  font-size: 16px;
  font-weight: 500;
}

/* 悬停效果 */
.layer-container >>> .el-tree-node__content:hover {
  background-color: rgba(56, 142, 240, 0.4) !important;
}
.layer-container >>> .el-tree-node__content:hover .el-tree-node__label {
  color: #fff !important;
}

/* 选中状态 */
.layer-container >>> .el-tree-node.is-checked > .el-tree-node__content {
  background-color: rgba(64, 158, 255, 0.25) !important;
}

/* 强制保持原始收缩宽度 */
.collapsed {
  transform: translateX(-100%);
  width: 0 !important;
  padding-left: 0;
}
/* 确保按钮在收缩状态下仍然可见 */
.collapsed .toggle-button {
  right: -12px; /* 保持位置不变 */
  transform: translateY(-50%) translateX(100%); /* 补偿容器的位移 */
}
/* 复选框样式 */
.layer-container >>> .el-checkbox__inner {
  background-color: transparent;
  border-color: #a0cfff !important;
}
.layer-container >>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #409eff !important;
}

/* 节点基础样式 */
.layer-container >>> .el-tree-node__content {
  height: 38px;
  margin: 3px 0;
  /* padding-left: 8px !important; */
}

/* 调整缩进，使子节点不缩进 */
.layer-container >>> .el-tree-node__content {
  /* padding-left: 8px !important; */
}
.layer-container >>> .el-tree-node__children {
  padding-left: 0 !important;
}

/* 数据展示框 */
.wind-data-display,
.current-data-display {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.wind-data-display {
  bottom: 320px;
  right: 280px;
}
.current-data-display {
  bottom: 425px;
  right: 280px;
}
</style>
